document.addEventListener("DOMContentLoaded", () => {
    let cursor = document.querySelector(".cursor");
    const radius = 10; // 调整这个值即可改变圈的大小

    for (let i = 0; i < 36; ++i) {
        let span = document.createElement('span');
        span.classList.add('box');
        span.style.setProperty('--i', i + 1);
        span.style.filter = `hue-rotate(${i * 10}deg)`;
        span.style.transformOrigin = `center ${radius}px`; // 关键改动在这里
        cursor.appendChild(span);
    }
});
document.addEventListener("mousemove", e => {
    gsap.to(
        ".box", {
        duration: 0.05,
        x: e.clientX,
        y: e.clientY,
        rotate: (index) => (index) * 10,
        stagger: 0.01
    }
    )
})
// let ball_list = [
//     document.querySelector("#b1"),
//     document.querySelector("#b2"),
//     document.querySelector("#b3"),
//     document.querySelector("#b4"),
//     document.querySelector("#b5"),
//     document.querySelector("#b6"),
//     document.querySelector("#b7"),
//     document.querySelector("#b8"),
//     document.querySelector("#b9"),
//     document.querySelector("#b10")
// ];
// ball_list.forEach(function (element) {
//     console.log(ball_list); // 检查数组内容是否为预期的元素列表
//     element.addEventListener("click", () => {
//         console.log(1);
//         let parent = element.parentElement;
//         let rect = parent.querySelector('rect');
//         rect.style.strokeDasharray = '400px'
//         rect.style.strokeDashoffset = '800';
//     })
//     element.addEventListener("blur", () => {
//         let parent = element.parentElement;
//         let rect = parent.querySelector('rect');
//         rect.style.strokeDasharray = '400px'
//         rect.style.strokeDashoffset = '0';
//     })
// });